<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{height:statusBarHeight+'px'}"></view>
					<view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
						<image src="../../static/jt6.png" @click="back()"></image>
						<view class="navbar-search">有好货</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
			</view>
			<view class="searchbox" @click="tosearch()">
				<view class="imgbox">
					<image src="../../static/ss.png"></image>
				</view>
				<view class="inputbox">
					<input :disabled="true" placeholder="搜索商品" placeholder-style="color:#FFF" />
				</view>
				<view class="searchsure">
					搜索
				</view>
			</view>
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
					:interval="2000" :duration="500">
					<swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index" @click="topages(item)">
						<image :src="item.img"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="listbox">
			<goods :list="list"></goods>
		</view>
		<view style="height: 20rpx;"></view>
		<u-back-top :scroll-top="scrollTop" :iconStyle="{
					color: '#fff',
				}" :customStyle="{
			backgroundColor: '#F94D29',
			color: '#fff',
		}" top="600"></u-back-top>
	</view>
</template>

<script>
	import goods from '../../components/goodsone.vue'
	export default {
		components: {goods},
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				navBarHeight: 45,
				/* 导航栏高度 */
				windowWidth: 375,
				/* 窗口宽度 */
				/* 设定状态栏默认高度 */
				list:[],
				page_index:1,
				is_data:true,
				banner:[],
				scrollTop:0,
			}
		},
		onShow() {
			this.getnav()
			this.is_data = true
			this.list = []
			this.banner = []
			this.page_index = 1
			this.getlist()
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			getnav() {
				// 获取手机系统信息
				const info = uni.getSystemInfoSync()
				// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
				this.statusBarHeight = info.statusBarHeight
				this.windowWidth = info.windowWidth
				// 除了h5 app mp-alipay的情况下执行
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				// 获取胶囊的位置
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo);
				// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
				this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
					.statusBarHeight)
				this.windowWidth = menuButtonInfo.left
				// #endif
			},
			getlist(){
				this.$http({
					url:'api/Wechat/goodsStuff',
					data:{
						page_index:this.page_index,
						page_size:20,
					}
				}).then(res=>{
					this.banner = res.data.adlist
					if(res.data.goodsStuff.length){
						this.list.push(...res.data.goodsStuff)
						this.page_index++
						return
					} 
					this.is_data = false
				})
			},
			topages(item){
				uni.navigateTo({
					url:item.link_url
				})
			},
			back(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//搜索
			tosearch(){
				uni.navigateTo({
					url:'/personalData/search/search'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.header {
		height: 599rpx;
		background: url(https://zdcloud.zxkjnc.com/images/6f5.png) no-repeat;
		width: 100%;
		background-size: 100% 599rpx;
	}

	.navbar {
		.navbar-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 399;
			width: 100%;
			// height: 102rpx;
			// padding-bottom: 20rpx;
			background: transparent;


			.navbar-content {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 30rpx;
				// height: 142rpx;
				box-sizing: border-box;

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}

				.navbar-search {
					display: flex;
					align-items: center;
					// padding: 0 10px;
					width: 100%;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;

				}

			}
		}
	}

	.searchbox {
		width: 690rpx;
		height: 70rpx;
		// opacity: 0.12;
		background: rgba(0, 0, 0, 0.12);
		border-radius: 36rpx;
		margin: 30rpx auto 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.imgbox {
			width: 72rpx;
			text-align: center;

			image {
				width: 33rpx;
				height: 28rpx;
			}
		}

		.inputbox {
			width: 480rpx;
			padding: 0 20rpx 0 0;
			height: 70rpx;

			>input {
				height: 70rpx;
			}
		}

		.searchsure {
			width: 112rpx;
			height: 66rpx;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 36rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 66rpx;
		}
	}
	.uni-margin-wrap {
			width: 690rpx;
			margin: 32rpx auto 0 auto;
		}
	.swiper {
		height: 260rpx;
	}
	.swiper-item {
		display: block;
		height: 260rpx;
		line-height: 260rpx;
		text-align: center;
		image{
			width: 690rpx;
			height: 260rpx;
		}
	}
	.listbox{
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		margin-top: -35rpx;
		padding: 35rpx 0;
	}
</style>
